<template>
  <zb-ai-result-top v-if="detail" :detail="detail" />
  <!-- answerStatus 当前按钮状态 0-无发送内容， 1-回答中 2-回答结束 3-中断回答 -->
  <div class="content flex">
    <div class="flex-1 talk-con">
      <zb-scroll ref="zbScrollRef">
        <span v-if="answerStatus == 0 || imgsrc.length === 0" class="form-tips">生成的内容显示在这里...</span>
        <img v-else :src="imgsrc" class="wenbuildimage" alt="">
        <zb-ai-loading v-if="answerStatus == 1 && isMobile" />
      </zb-scroll>
      <!-- v-if="answerStatus == 2 || answerStatus == 3" -->
      <zb-ai-btn :type="2" v-if="answerStatus == 2" @again="sendMsgFun(formData)" :src="imgsrc" />
    </div>
    <zb-ai-result-history />
  </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, shallowRef, computed, reactive} from 'vue';
import { wstIndexApi } from '@/api/app';
import { isMobile} from '@/utils/util';
const emits = defineEmits(['loadingOk']);
const imgsrc = ref('');
const answerStatus = ref(0); // 当前按钮状态 0-无发送内容， 1-回答中 2-回答结束 3-中断回答
const imgName = ref('');
const zbScrollRef = ref();
const formData = ref()
const sendMsgFun = (data:any) => {
  formData.value = data;
  imgName.value = data.text;
  answerStatus.value = 1;
  wstIndexApi(data).then((res:any)=>{
    imgsrc.value = res.url;
    answerStatus.value = 2;
    zbScrollRef.value?.setData(res.url)
    emits('loadingOk'); // 按钮loading结束
  }).catch(()=>{
    emits('loadingOk')
  })
}

// 初始化数据
const detail = ref();  // 产品详情
const initData = (data:any) => {
  detail.value = {...data};
  console.log('初始化数据-----initData', data)
}
// 清除
const clear = () => {
  imgsrc.value = ""
}
const stopTalk = () => {
  imgsrc.value = ""
}
defineExpose({
  initData,
  clear,
  sendMsgFun,
  stopTalk
})

</script>
<style lang="scss" scoped>
  .wenbuildimage{display: block; margin: 0 auto;}
  @import '@/assets/styles/airesult.scss'; // 确保路径正确
  .top.show{margin-bottom: 0;}
  .content{padding-top: 0.4rem;}
</style>